<html>
<head>
	<style>
		body {
			background-image: url('img/1.jpg') no-repeat center top;
		}
		
		li {
			width: 80px;
			height: 50px;
			position: left;
			margin: 100px auto;
		}
		
		.selected {
			border: 5px solid red;
			
		}
	</style>
</head>

<body>
	<ul class='card'>
		<li><img src='img/1.jpg' class='img1'></li>
		<li><img src='img/2.jpg' class='img2'></li>
		<li><img src='img/3.jpg' class='img3'></li>
	</ul>
</body>
<script>
    // 获取含img tag的element对象的伪数组
	var imgs = document.getElementsByClassName('card')[0].getElementsByTagName('img');
    // 用循环注册所有img tag的click event
	for ( var i=0; i<imgs.length; i++) {
		imgs[i].onclick = function () {
            // this对象指向调用者 element.style 以驼峰式命名调用各样式且要和css的属性值一样，否则不生效
			document.body.style.backgroundImage = 'url('+this.src+')';
            // 使用循环清除所有元素样式
			for ( var j=0; j<imgs.length; j++)
				if (j !== i)
					imgs[j].style.border = '';
            // 最后再设置特定元素的样式
			this.style.border = '5px solid red';
		}
		
		imgs[i].onmouseover = function () {
			this.style.border = '5px solid blue';
		}
		
		imgs[i].onmouseout = function () {
			this.style.border = '';
		}
		
		
	}
</script>
</html>